/**
 * Created by sunq on 2016/11/22.
 */
var pre = document.getElementById("leftButton");
var next = document.getElementById("rightButton");
var ulMarginLeft = document.getElementById('myul');
var pointArray=document.getElementById('points').getElementsByTagName('li');
var buttonUl = document.getElementById('points');
var index=0;

function animate(number){
    ulMarginLeft.style.marginLeft = parseInt(ulMarginLeft.style.marginLeft)+number+'px';

    console.log(ulMarginLeft.style.marginLeft+'   '+index);
    if(parseInt(ulMarginLeft.style.marginLeft)==-2400){
        ulMarginLeft.style.marginLeft=-600+'px';
    }else if(parseInt(ulMarginLeft.style.marginLeft)==0){
        ulMarginLeft.style.marginLeft=-1800+'px';
    }
}
pre.onclick = function () {
    animate(600);
    index=index-1;
    setLight();
};
next.onclick = function () {
    animate(-600);
    index=index+1;
    setLight();
}

function setLight(){
    if(index>2){
        index=0;
    }else if(index<0){
        index=2;
    }

    for(var i=0;i<pointArray.length;i++){
        if(i!=index){
            pointArray[i].className='';
        }
    }

    pointArray[index].className='on';
}
// 定时器
// setInterval(function () {
//     animate(-600);
//     index=index+1;
//     setLight();
// },2000);

console.log(pointArray);
for(var i=0;i<pointArray.length;i++){
    pointArray[i].onclick = function () {
        console.log(this.getAttribute("index"));
        // animate(-(i-index)*600);
        // console.log(pointArray[i]);
    };
}
// buttonUl.addEventListener('click', function (e) {
//     var e = window.event || arguments[0];
//     var src = e.target || e.srcElement;
//
//     var myIndex = parseInt(src.getAttribute('index'));
//     console.log(myIndex);
//     var offset = -600 * (myIndex - index);
//     animate(offset);
//     index = myIndex;
// });
// pointArray[0].onclick = function () {
//     console.log('第一个');
// }
// pointArray[1].onclick = function () {
//     console.log('第二个');
// }
// pointArray[2].onclick = function () {
//     console.log('第三个');
// }
/**
思路：
 一：布局与样式：
 1.放一个长宽固定的div就叫container。设置overflow:hidden
 2.在container里面放一个ul，ul里面再水平放三个li，li里面放照片。设置li的高为container的高，宽度是container的宽度，里面的img长和宽都是100%。ul的宽度为三个li的宽度
 二：js逻辑
 1.现在ul水平放了三个照片，宽度是三个照片的宽度之和。轮播效果其实就是移动ul，每次向左移动一个照片的宽度。等全部移完后，再把ul弄回去，重复以上操作
 2.水平放的三个小按钮原理是：拿到那三个小按钮的<li>数组，弄一个全局变量index；在左右切换的事件里增1减1，并在此刻动态添加或删除li数组的on这个class
 */